<template>
    <div class="topnav">
        <router-link to="/">
            <span>推荐音乐</span>
        </router-link>
        <router-link to="/hot">
            <span>热歌榜</span>
        </router-link>
        <router-link to="/search">
            <span>搜索</span>
        </router-link>
    </div>
</template>
<style lang="less" scoped>
.topnav{
    position: sticky;
    z-index:9;
    background-color:white;
    top:0px;
    width:100%;
    display: flex;
    height: 38px;
    line-height: 38px;
    border-bottom:2px solid #eee;
    a{
        flex:1;
        color:#222;
        font-size:15px;
        text-align: center;
        position: relative;
        &.top-exact-active{
            span{
                color:#dd001b;
                border-bottom: 2px solid #dd001b;
            }
        }
        span{
            padding:0px 3px;
            white-space: nowrap;
            position: absolute;
            left:50%;
            transform:translateX(-50%);
            bottom:-2px;
            display: inline-block;
        }
    }
}
</style>